<style lang="scss" scoped>
.dibu {
    width: 100%;
    text-align: center;
    // height: 50px;
    // line-height: 50px;
    position: fixed;
    bottom: 0;
    // background-color: antiquewhite;

    button {
        width: 100px;
        height: 30px;
        line-height: 30px;
    }

    input {
        // border: none;
        // border-radius: 15px;
        width: 70%;
        line-height: 25px;
        border: 1px solid #ccc;
    }
}
</style>
<template>
    <div>
        <van-nav-bar title="评论页" left-arrow @click-left="onClickLeft" van-nav-bar-icon-color="black" />
        <div class="comments">
            <!-- <el-card> -->
                <!-- <template>
                    <div>
                        <h3>留言区</h3>
                    </div>
                </template>
                <div class="edit-box">
                    <div class="edit-left">
                        <el-avatar :size="45" :src="userInfo.avatar" />
                    </div>
                    <div class="editbox-middle">
                        <el-input placeholder="与其赞同别人的话语，不如自己畅所欲言..." v-model="comment">

                        </el-input>
                    </div>
                    <div class="editbox-right">
                        <el-button @click="handlePublish(comment)">发布</el-button>
                    </div>
                </div>
                 列表区 -->
                <!-- <div class="listbox" v-for="(item, index) in commentsList" :key="Index">
                    <div class="top-level">
                        <div class="listbox-top-user">
                            <el-avatar :size="45" :src="item.userImg" />
                            <p>
                                <span>{{ item.createdBy }}</span>
                                <span>{{ item.roleName }}</span>
                            </p>
                        </div>
                        <div class="listbox-middle-root">{{ item.comment }}</div>
                        <div class="listbox-bottom">
                            <span>发布时间:{{ item.createdAt }}</span>
                            <span @click="handleReply(item.id, item.id)">回复</span>
                        </div>
                    </div>
                </div> -->
                <!-- 二级 -->
                <!-- <div v-if="item.children && item.children.length">
                    <SecondComment :SecondComments="item.children" @handle-reply="handleReply"
                        style="margin-left: 0;" />
                    <template v-for="(children, childIndex) in item.children" :key="childIndex">
                        <template v-if="child.children && child.children.length">
                            <ChildComment :ChildComments="child.children" :parentName="child.createdBy"
                                @to-reply="handleReply" style="margin-left: 65px;" />
                        </template>
                    </template>
                </div> -->
                <!-- <div class="reply-box-container" v-show="showReplyIndex === item.id && showReply">
                    <div class="replybox" id="reply-box">
                        <div class="replybox-left">
                            <el-avatar :size="30" :src="avatar" />
                        </div>
                        <div class="replybox-middle">
                            <el-input placeholder="回复" v-model="replyComment">

                            </el-input>
                        </div>
                        <div class="replybox-right">
                            <el-button @click="handlePublish(replyComment)">提交</el-button>
                        </div>
                    </div>
                </div> -->
            <!-- </el-card> -->
        </div>

        <ul>
            <li v-for="(comment, index) in comments" :key="index">
                {{ comment }}
            </li>
        </ul>
        <div class="dibu">
            <input type="text" v-model="newComment" placeholder="请输入搜索关键词"/>
            <button @click="addComment">发布评论</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Index from '../home/index.vue';
import { size } from 'lodash';

const newComment = ref('');
const comments = ref([]);
const onClickLeft = () => history.back();

const addComment = () => {
    comments.value.push(newComment.value);
    newComment.value = '';
};
</script>